import React from "react";
import {Button, Table, Modal, Space, message} from 'antd';
import Req from "../../../api";
import AddCoupon from "../../../components/addCoupon/AddCoupon";
import CheckCoupon from "../../../components/checkCoupon/CheckCoupon";
import ModifyCoupon from "../../../components/modifyCoupon/ModifyCoupon";
import GrantCoupon from "../../../components/grantCoupon/GrantCoupon";
import {ExclamationCircleOutlined} from "@ant-design/icons";
class GoodsComm extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      data: [],
      pagination: {
        current: 1,
        pageSize: 4,
      },
      loading: false,
      title: "",
      visible: false,
      showComponent: 1,
      rowData: null
    }
  }
  const
  columns = [
    {
      title: '优惠券名称',
      dataIndex: 'tkt_name',
    },
    {
      title: '类型',
      dataIndex: 'tkt_type',
    },
    {
      title: '金额',
      dataIndex: 'tkt_submoney',
    },
    {
      title: '订单金额',
      dataIndex: 'tkt_usemoney',
    },
    {
      title: '发放数量',
      dataIndex: 'tkt_fnum',
    },
    {
      title: '使用数量',
      dataIndex: 'tkt_snum',
    },
    {
      title: '有效日期',
      render: (row)=>{
        return (
            <div>
              <div>{row.tkt_ystartdate}</div>
              <div>{row.tkt_yenddate}</div>
            </div>
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'option',
      render:()=>(
          <div>
            <Button type="link" onClick={this.checkModal}>查看</Button>
            <Button type="link" onClick={this.modifyModal}>修改</Button>
            <Button type="link" onClick={this.grantModal}>发放</Button>
            <Button type="link" onClick={this.couponDelete.bind(this)} danger>删除</Button>
          </div>
      )
    }
  ];
  componentDidMount() {
    this.getData();
  }
  getData = function () {
    this.setState({
      loading: true
    })
    Req.couponPage().then(res=>{
      this.setState({
        data: res.data,
        loading: false
      })
    }).catch(err=>{
      console.log(err)
    })
  }
  handleOk = e => {
    this.addCoupon(e);
    this.setState({
      visible: false,
    });
  };
  // 添加秒杀
  addCoupon = function (prams) {
    Req.couponAdd(prams).then(res=>{
      message.success(res.msg)
    }).catch(err=>{
      console.log(err)
    })
  }
  // 修改秒杀
  modifyCoupon = function (prams) {
    Req.couponModify(prams).then(res=>{
      message.success(res.msg)
    }).catch(err=>{
      console.log(err)
    })
  }
  // 修改确认
  handleOk1 = e => {
    this.setState({
      visible: false,
    });
    this.modifyCoupon(e);
  };
  // 发放确认
  handleOk2 = e => {
    this.setState({
      visible: false,
    });
    this.grantCoupon(e);
  };
  grantCoupon = function (prams) {
    Req.couponGrant(prams).then(res=>{
      message.success(res.msg)
    }).catch(err=>{
      console.log(err)
    })
  }
  // 删除
  couponDelete=function() {
    Modal.confirm({
      title: '确认？',
      icon: <ExclamationCircleOutlined />,
      content: '确认删除该秒杀吗？',
      okText: '确认',
      cancelText: '取消',
      onOk:()=>{
        Req.killDelete({id:this.state.rowData.id}).then(res=>{
          message.success(res.msg)
        }).catch(err=>{
          console.log(err)
        })
      }
    });
  }
  // 关闭模态框
  handleCancel = e => {
    this.setState({
      visible: false
    });
  };
  // 显示模态框
  showModal = () => {
    this.setState({
      visible: true,
      showComponent: 1,
      title: "添加优惠券",
    });
  };
  // 查看模态框显示
  checkModal = () => {
    this.setState({
      visible: true,
      showComponent: 2,
      title: "查看优惠券",
    });
  }
  // 修改模态框显示
  grantModal = () => {
    this.setState({
      visible: true,
      showComponent: 4,
      title: "发放优惠券",
    });
  }
  // 修改优惠券
  modifyModal = () => {
    this.setState({
      visible: true,
      showComponent: 3,
      title: "修改优惠券",
    });
  }
  handleTableChange = (pagination) => {
    this.getData();
  };
  render() {
    const { data, pagination, loading } = this.state;
    return (
        <>
          <Space style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={this.showModal}>添加优惠券</Button>
          </Space>
          <Table
              columns={this.columns}
              dataSource={data}
              rowKey={(record) => `complete${record.id}`}
              pagination={pagination}
              loading={loading}
              onRow={record =>{
                return {
                  onClick: event =>{
                    this.setState({
                      rowData: record
                    },() => {
                    })
                  }
                }
              }}
              onChange={this.handleTableChange}
          />
          <Modal
              title={this.state.title}
              visible={this.state.visible}
              onCancel={this.handleCancel}
              footer={
                []
              }
              destroyOnClose
          >
            {this.state.showComponent === 1 ?
                <AddCoupon handleCancel={this.handleCancel} handleOk={this.handleOk} />:
                this.state.showComponent === 2 ? <CheckCoupon data={this.state.rowData}/> : this.state.showComponent === 3 ? < ModifyCoupon data={this.state.rowData} handleCancel={this.handleCancel} handleOk={this.handleOk1}/>
                : <GrantCoupon data={this.state.rowData} handleOk={this.handleOk2}/>
            }
          </Modal>
        </>
    );
  }
}
export default GoodsComm